tg-me.com/defront/1121
Last Update:
Оптимизация производительности Angular-приложений
Минко Гечев из Google рассказал про распространённые проблемы производительности Angular-приложений и способы их решения — "4 Runtime Performance Optimizations".
— Загрязнение зоны (zone pollution). Возникает в том случае, когда механизм обнаружения изменений запускается асинхронными событиями, не влияющими на состояние основного приложения. Для решения этой проблемы регистрацию событий нужно выносить вне основной зоны Angular с помощью метода runOutsideAngular
. Примером загрязнения зоны может быть регистрация обработчика события mousemove
для отображения лейблов диаграммы из сторонней библиотеки.
— Запуск обнаружения изменений вне границ компонента (out of bounds change detection). Происходит тогда, когда возникновение событий в одном компоненте запускает механизм обнаружения изменений в соседних независимых компонентах. Эта проблема решается использованием стратегии обнаружения изменений onPush
.
— Лишние перерасчёты значений в шаблонах (recalculation of referentially transparent expressions). Если в шаблоне используются методы для получения значений, то они будут исполняться каждый раз при ререндериге компонента. Если эти методы удовлетворяют принципу ссылочной прозрачности, то их можно либо мемоизировать, либо заменить пайпами.
— Большое дерево компонентов (large component trees). Если дерево компонентов слишком большое, то как бы ни были оптимизированы компоненты, приложение будет работать с подтормаживаниями. Решение — уменьшить размер дерева. Это можно сделать с помощью пагинации или виртуализированного списка.
#angular #performance #video
https://youtu.be/f8sA-i6gkGQ
BY Defront — про фронтенд-разработку и не только
![](https://photo.tg-me.com/u/cdn4.cdn-telegram.org/file/QISOc6yhg8sWd_p1KBD8mgnI4sCYEoCXz3VRDQiBR_WXxYsQQvihgPMRDIZOHP1CpAko3DBELh8CdGxlHQUab6hc_hK_tBkt_1LtyC6TYGbjHPFcDT7HYVU2tp7Op8X970PZ22HDlTZqtOYKY3vQgfJVVI16pnMsXvjD5YKX6rdPQRUM3MX2ylWbMH2qqQM0mMjUdLc4mfuIUYgbtSzTkbH7pL3uREQ_2En6k3nSk1bAik_5qSWggAQ2BULz8-nb3JWeFc1zOs3Yh8OJpHDSIvyDx55EyiPUoz-NTP_JizGZ4pcYr3lq0TkX0YNyenSDWXnuzVLA5X1fFw1xKVLPHA.jpg)
Share with your friend now:
tg-me.com/defront/1121